<template>
  <a-table :columns="columns" :dataSource="WljdDataSource" :pagination="pagination" @change="onChange">
    <!--搜索部分-->
    <div
      slot="filterDropdown"
      slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
      style="padding: 8px">
      <a-input
        v-ant-ref="c => searchInput = c"
        :placeholder="`Search ${column.dataIndex}`"
        :value="selectedKeys[0]"
        @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
        @pressEnter="() => handleSearch(selectedKeys, confirm)"
        style="width: 188px; margin-bottom: 8px; display: block;"/>
      <a-button
        type="primary"
        @click="() => handleSearch(selectedKeys, confirm)"
        icon="search"
        size="small"
        style="width: 90px; margin-right: 8px">Search</a-button>
      <a-button
        @click="() => handleReset(clearFilters)"
        size="small"
        style="width: 90px">Reset</a-button>
    </div>
    <a-icon
      slot="filterIcon"
      slot-scope="filtered"
      type="search"
      :style="{ color: filtered ? '#108ee9' : undefined }"/>
    <template slot="customRender" slot-scope="text">
      <span v-if="searchText">
        <template
          v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))">
          <mark
            v-if="fragment.toLowerCase() === searchText.toLowerCase()"
            :key="i"
            class="highlight">{{ fragment }}</mark>
          <template v-else>{{ fragment }}</template>
        </template>
      </span>
      <template v-else>{{ text }}</template>
    </template>




    <!--表格最后两列-->
    <p slot="expandedRowRender" slot-scope="record" style="margin: 0">{{ record.description }}</p>
    <div slot="ddScore" slot-scope="record">
      <div v-if="record.wljd.wljdZt===0">
        未签协议
      </div>
      <div v-if="record.wljd.wljdZt===1">
        未上货
      </div>
      <div v-if="record.wljd.wljdZt===2">
        已上货
      </div>
      <div v-if="record.wljd.wljdZt===3">
        运输中
      </div>
      <div v-if="record.wljd.wljdZt===4">
        已到达
      </div>
      <div v-if="record.wljd.wljdZt===5">
        已卸货
      </div>
      <div v-if="record.wljd.wljdZt===6">
        货主付款
      </div>
      <div v-if="record.wljd.wljdZt===7">
        司机收款
      </div>
    </div>
    <div slot="ddScoreTime" slot-scope="record">
      <div v-if="record.wljd.wljdZt===0">
        {{ record.wljd.wljdFqjdqqrqsj }}
      </div>
      <div v-if="record.wljd.wljdZt===1">
        {{ record.wljd.wljdQsxyrqsj }}
      </div>
      <div v-if="record.wljd.wljdZt===2">
        {{ record.wljd.wljdZhrqsj }}
      </div>
      <div v-if="record.wljd.wljdZt===3">
        {{ record.wljd.wljdYsrqsj }}
      </div>
      <div v-if="record.wljd.wljdZt===4">
        {{ record.wljd.wljdDdmddrqsj }}
      </div>
      <div v-if="record.wljd.wljdZt===5">
        {{ record.wljd.wljdXhrqsj }}
      </div>
      <div v-if="record.wljd.wljdZt===6">
        {{ record.wljd.wljdFkrqsj }}
      </div>
      <div v-if="record.wljd.wljdZt===7">
        {{ record.wljd.wljdQrfkrqsj }}
      </div>
    </div>
  </a-table>
</template>
<script>
    export default {
        name: 'WljdTable',
        props: ["WljdDataSource"],
        data() {
            return {
                searchText: null,
                searchInput: null,
                columns: [{
                    title: '序号',
                    dataIndex: 'key',
                    width: 30,
                }, {
                    title: '货主',
                    dataIndex: 'hzUser.userNc',
                    width: 80,
                    //   搜索
                    scopedSlots: {
                        filterDropdown: 'filterDropdown',
                        filterIcon: 'filterIcon',
                        customRender: 'customRender',
                    },
                    onFilter: (value, record) => record.sjUser.userNc.toString().toLowerCase().includes(value.toLowerCase()),
                    onFilterDropdownVisibleChange: visible => {
                        if (visible) {
                            setTimeout(() => {
                                this.searchInput.focus();
                            }, 0);
                        }
                    },
                }, {
                    title: '货物类型',
                    dataIndex: 'hwInfo.hw.hwLx',
                    filters: [
                        {
                            text: 'Joe',
                            value: 'Joe'
                        },
                        {
                            text: 'Jim',
                            value: 'Jim'
                        },
                    ],
                    width: 80,
                    onFilter: (value, record) => record.hwInfo.hw.hwLx.indexOf(value) === 0,
                }, {
                    title: '接单司机',
                    dataIndex: 'sjUser.userNc',
                    width: 80,
                    //   搜索
                    scopedSlots: {
                        filterDropdown: 'filterDropdown',
                        filterIcon: 'filterIcon',
                        customRender: 'customRender',
                    },
                    onFilter: (value, record) => record.sjUser.userNc.toString().toLowerCase().includes(value.toLowerCase()),
                    onFilterDropdownVisibleChange: visible => {
                        if (visible) {
                            setTimeout(() => {
                                this.searchInput.focus();
                            }, 0);
                        }
                    },
                }, {
                    title: '时间',
                    dataIndex: 'wljd.wljdFqjdqqrqsj',
                    width: 80,
                    sorter: (a, b) => a.wljd.wljdFqjdqqrqsj - b.wljd.wljdFqjdqqrqsj,
                }, {
                    title: '订单状态',
                    width: 80,
                    // sorter: (a, b) => a.ddScore.length - b.ddScore.length,
                    // scopedSlots: {customRender: 'ddScore'}
                }, {
                    title: '状态修改时间',
                    width: 80,
                    sorter: (a, b) => a.ddScoreTime.length - b.ddScoreTime.length,
                    scopedSlots: {customRender: 'ddScoreTime'}
                }],
                pagination: {
                    defaultPageSize: 5,
                    style:
                        {
                            marginRight: '10px',
                            marginTop:
                                '12px'
                        }
                }
            }
        },
        methods: {
            onChange(pagination, filters, sorter) {
                console.log('params', pagination, filters, sorter)
            },
            handleSearch(selectedKeys, confirm) {
                confirm();
                this.searchText = selectedKeys[0];
            },
            handleReset(clearFilters) {
                clearFilters();
                this.searchText = '';
            },
        }
    }
</script>
